<template>
	<div>
		<!-- 报名按钮 -->
		<!-- <Button type="primary" @click="openModal">报名</Button> -->

		<!-- 弹窗 -->
		<Modal v-model="innerVisible" title="报名活动" width="800" :closable="true" :mask-closable="false"
			@on-ok="handleSubmit">
			<!-- 商品选择 -->
			<h3>选择商品</h3>
			<Table border :columns="goodsColumns" :data="goodsList" @on-row-click="selectGoods" highlight-row></Table>
			<div class="acea-row row-right page">
				<Page :total="total" :current.sync="formValidate.page" @on-change="pageChange"
					:page-size="formValidate.limit" />
			</div>
			<!-- SKU 配置 -->
			<div v-if="selectedGoods" style="margin-top: 20px">
				<h3>配置 SKU 活动信息 ({{ selectedGoods.name }})</h3>
				<Table border :columns="skuColumns" :data="skuList" editable>
					<template slot-scope="{ row }" slot="activity_price">
						<Input v-model="row.activity_price" placeholder="输入活动价" />
					</template>
					<template slot-scope="{ row }" slot="activity_stock">
						<Input v-model="row.activity_stock" placeholder="输入活动库存" />
					</template>
					
				</Table>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		getGoodListApi,
		getActivityGoodSku
	} from '@/api/capital';
	export default {
		name: "SignupModal",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			activityGoodId: {
				type: [String, Number],
				default: null
			}
		},
		data() {
			return {
				innerVisible: false,
				selectedGoods: null,
				goodsList: [],
				total: 0,
				formValidate: {
					join_type: "1",
					name: '',
					phone: '',
					page: 1,
					limit: 10,
				},
				// goodsList: [{
				// 		id: 1,
				// 		name: "商品A",
				// 		thumb: "https://via.placeholder.com/50",
				// 		price: 100
				// 	},
				// 	{
				// 		id: 2,
				// 		name: "商品B",
				// 		thumb: "https://via.placeholder.com/50",
				// 		price: 200
				// 	}
				// ],
				goodsColumns: [{
						title: "ID",
						key: "id",
						width: 80
					},
					{
						title: "商品名",
						key: "good_name"
					},
					{
						title: "缩略图",
						key: "image",
						render: (h, params) => {
							return h("img", {
								attrs: {
									src: params.row.thumb,
									width: "40"
								}
							});
						}
					},
					{
						title: "价格",
						key: "price"
					}
				],
				skuList: [],
				skuColumns: [{
						title: "SKU ID",
						key: "id",
						width: 80
					},
					{
						title: "规格",
						key: "suk"
					},
					{
						title: "库存",
						key: "stock"
					},
					{
						title: "原价",
						key: "price"
					},
					{
						title: "活动价",
						key: "activity_price",
						slot: "activity_price"
					},
					{
						title: "活动库存",
						key: "activity_stock",
						slot: "activity_stock"
					}
				]
			};
		},
		watch: {
			visible(val) {
				this.innerVisible = val
				if (val) {
					console.log("打开弹窗, 活动商品ID:", this.activityGoodId);
					// 可以用 this.activityId 去请求商品
					this.getGoodList(this.activityGoodId)
				}
			},
			innerVisible(val) {
				this.$emit("update:visible", val)
			}
		},
		methods: {
			selectGoods(row) {
				this.selectedGoods = row;
				// 获取该商品的sku列表
				// 获取供应商信息
				getActivityGoodSku(row.id)
					.then(async (res) => {
						this.skuList = res.data.info
					})
					.catch((res) => {
						this.$Message.error(res.msg)
					})
				// this.skuList = [{
				// 		id: "SKU1",
				// 		spec: "M",
				// 		price: 100,
				// 		activity_price: "",
				// 		activity_stock: ""
				// 	},
				// 	{
				// 		id: "SKU2",
				// 		spec: "L",
				// 		price: 120,
				// 		activity_price: "",
				// 		activity_stock: ""
				// 	}
				// ];
			},
			//分页
			pageChange(status) {
				this.formValidate.page = status;
				this.getGoodList();
			},
			getGoodList() {
				this.loading = true;
				let data = {
					activity_id: this.activityGoodId,
					page: this.formValidate.page,
					limit: this.formValidate.limit,
				};
				getGoodListApi(data)
					.then(async (res) => {
						let data = res.data;
						this.goodsList = data.list;
						this.total = res.data.count;
						this.loading = false;
					})
					.catch((res) => {
						this.loading = false;
						this.$Message.error(res.msg);
					});
			},
			handleSubmit() {
				if (!this.selectedGoods) {
					this.$Message.error("请选择商品");
					return;
				}
				console.log("skuList", this.skuList)
				if (this.skuList.some(s => !s.activity_price || !s.activity_stock)) {
					this.$Message.error("请填写完整的 SKU 活动信息");
					return;
				}
				
				// 提交数据
				const payload = {
					goods: this.selectedGoods,
					skus: this.skuList
				};
				
				console.log("提交数据:", payload);
				this.$Message.success("报名成功！");
				this.modalVisible = false;
			},
			closeModal() {
				this.innerVisible = false
			}
		}
	};
</script>